<template>
    <div class="header">
        <span>网易云音乐</span>

        <RouterLink to="/find">发现音乐</RouterLink>
        <RouterLink to="/my">我的音乐</RouterLink>
        <RouterLink to="/friend">关注</RouterLink>
        <RouterLink to="/musician">音乐人</RouterLink>

        <RouterView></RouterView>
    </div>





    <!-- <div>首页</div>
    <div>
        <button @click="onLogin">登录页面</button>
        <button @click="onFind">发现页面</button>
    </div> -->
</template>

<script setup>
// 先引用 userouter
import { useRouter, useRoute, RouterLink } from 'vue-router';

const router = useRouter();
const route = useRoute();
/**
 * router 主要用来跳转路由的 页面和页面之间的操作
 * route : 主要用来获取路由参数的，在路由跳转的时候，可以传递参数

 */
const onLogin = () => { 
    console.log("点击了登录按钮");
    //直接通过path跳转
    // router.push('/login')
    // 通过name跳转 login?id=123
    router.push({ name: 'login', query: { id: 123 }})

}
const onFind = () => { 
    console.log("点击了发现按钮");
}
</script>

<style  scoped>
.header{
    height: 50px;
    background-color: #151515;
    a{
        width: 40px;
        color: white;
        text-decoration: none;
        line-height: 50px;
        margin-left: 20px;
        &:hover{
            color: red;
        }
    }
        span{
            color: white;
            font-size: 30px;
            font-weight: 800;
            margin-right: 80px;
            line-height: 50px;
        }
       
   }
  
</style>